<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>在线用户</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div class="content" style="margin: 15px">

    <div class="offset3">
        <div id="t1">

        </div>
    </div>

    <div id="content" class="hide">
        <form id="J_Form" class="form-horizontal" action="../edit">
            <input type="hidden" name="id" value="0">
            <input type="hidden" name="parentId" value="0">

            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>名称</label>

                    <div class="controls">
                        <input name="name" type="text" data-rules="{required:true}"
                               class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label"><s></s>URL：</label>

                    <div class="controls">
                        <input name="url" type="text" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label"><s></s>权限：</label>

                    <div class="controls">
                        <input name="permission" type="text" class="input-normal control-text">
                    </div>
                </div>

                <div class="control-group span8">
                    <label class="control-label"><s>*</s>权重：</label>

                    <div class="controls">
                        <input name="position" type="text" data-rules="{required:true,number:true}"
                               class="input-normal control-text" value="1">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>类型：</label>

                    <div class="controls">
                        <select name="type">
                            <option value="nav">顶部导航</option>
                            <option value="second_nav">二级导航</option>
                            <option value="menu">菜单</option>
                            <option value="button">按钮</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
    <script src="http://g.alicdn.com/bui/bui/1.1.10/bui-min.js"></script>
    <script type="text/javascript">
        BUI.use(['bui/tree', 'bui/grid', 'bui/menu', 'bui/form', 'bui/overlay'], function (Tree, Grid, Menu, Form, Overlay) {
            var data =${data};
            var tree = new Tree.TreeList({
                render: '#t1',
                root: {
                    id: '0',
                    text: 'ROOT',
                    expanded: true
                },
                showRoot: true,
                nodes: data,
                showLine: true //显示连接线
            });
            tree.render();

            var menu = new Menu.ContextMenu({
                children: [
                    {
                        iconCls: 'icon-plus btn-edit',
                        text: '新建',
                        handler: addFunction
                    },
                    {xclass: 'menu-item-sparator'},
                    {
                        iconCls: 'icon-remove',
                        text: '删除',
                        handler: function () {
                            var selectedNode = tree.getSelected();
                            $.ajax({
                                url: "./delete/" + selectedNode.id + ".json",
                                dataType: 'json',
                                data: data,
                                type: "POST",
                                success: function (data) {
                                    if (data.code == 2000) {
                                        BUI.Message.Alert("成功")
                                        location.replace(location)
                                    } else {
                                        BUI.Message.Alert(data.msg)
                                    }
                                }
                            })
                        }
                    },
                    {
                        iconCls: 'icon-pencil',
                        text: '编辑',
                        handler: function () {
                            var selectedNode = tree.getSelected();
                            dialog.show();
                            $("input[name='id']").val(selectedNode.id)
                            $("input[name='name']").val(selectedNode.text)
                            $("input[name='url']").val(selectedNode.url)
                            $("input[name='permission']").val(selectedNode.permission)
                            $("input[name='position']").val(selectedNode.position)
                            $("select[name='type']").find("option[value='" + selectedNode.type + "']").attr("selected", true)
                        }
                    }
                ]
            });


            tree.on('itemcontextmenu', function (ev) {
                var item = ev.item;
                tree.setSelected(item);
                menu.set('xy', [ev.pageX, ev.pageY]);
                menu.show();
                return false; //prevent the default menu
            });


            function addFunction() {
                var selectedNode = tree.getSelected();
                dialog.show();
                $("#J_Form")[0].reset()
                $("input[name='parentId']").val(selectedNode.id)
            }


            var dialog = new Overlay.Dialog({
                title: '菜单',
                width: 500,
                height: 350,
                //配置DOM容器的编号
                contentId: 'content',
                success: function () {
                    var data = {
                        id: $("input[name='id']").val(),
                        name: $("input[name='name']").val(),
                        url: $("input[name='url']").val(),
                        permission: $("input[name='permission']").val(),
                        position: $("input[name='position']").val(),
                        parentId: $("input[name='parentId']").val(),
                        type: $("select[name='type']").val()
                    }
                    console.log(data)
                    console.log(data.type)

                    $.ajax({
                        url: "./edit.json",
                        dataType: 'json',
                        data: data,
                        type: "POST",
                        success: function (data) {
                            if (data.code == 2000) {
                                BUI.Message.Alert("成功")
                                location.replace(location)
                            } else {
                                BUI.Message.Alert("失败")
                            }
                        }
                    })

                    this.close();
                }
            });
        });
    </script>

    <!-- script end -->
</div>
</body>
</html>
